<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ROOT}}/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/lhh_lib.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/zh_tab.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap-datetimepicker.css" />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="{{ROOT}}/js/html5shiv.js"></script>
    <![endif]-->

</head>
<body class="content">
    <div class="row _lhh_breadcrumb MB10 visible-lg">
        <ul class="breadcrumb pull-left">
            <li><a href="index.html">首页</a></li>
            <li class="active">电站性能分析</li>
        </ul>
        <div class="p-rel">
            <div class="_lhh_breadcrumb-more MR15">
                <!--电子时钟 begin-->
                <include file="{{ROOT}}/controllers/include/clock.html" dataType="html"></include>
                <!--电子时钟 end-->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-mod-12">
            <div class="page-header">
                <div class="ML10 MT10">
                    <label class="MR5">统计方式</label>
                    <select type="select" id="dateSelect" class="form-control">
                        <option dateType="2">按月统计</option>
                        <option dateType="3">按日统计</option>
                    </select>
                    <label class="MR5 ML30">日期</label>
                    <input size="16" type="text" value="2012-06-15" readonly class="form_datetime form-control">
                    <button type="submit" class="btn page-header-btn ML10">查询</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row MB30">
        <div class="col-md-12 MT20">
            <div class="echarts" style="height: 400px;width:100%;" id="echarts-column-chart"></div>
        </div>
    </div>
</body>
</html>


<script type="text/javascript" src="{{ROOT}}/js/highstock.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/datetimepicker-custom.js"></script>





<script type="text/javascript">
    LAMJS.main(function(){
        'use strict';
        var System=this;

        function highstock(){
            var seriesOptions = [],
                    seriesCounter = 0,
                    names = ['MSFT', 'AAPL'];
            $.each(names, function (i, name) {
                $('#echarts-column-chart').highcharts({
                    chart: {
                        height: 620,
                        zoomType: 'xy'
                    },
                    title: {
                        text: '2015年8月 电站性能分析',
                        style:{
                            fontFamily:'SimHei'
                        }
                    },
                    credits: {
                        enabled:false    //不显示版权标签
                    },
                    legend: {
                        verticalAlign: 'bottom',
                        backgroundColor: '#FFF',
                        symbolRadius:2
                    },
                    xAxis: {
                        categories:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
                    },
                    yAxis: [{
                        title: {
                            text: '单位(MW)'
                        },
                        gridLineDashStyle: 'longdash',
                        lineWidth: 1,
                        lineColor:'#70a4ca'
                    },{
                        title: {
                            text: '单位(%)'
                        },
                        gridLineDashStyle: 'longdash',
                        lineWidth: 1,
                        lineColor:'#70a4ca',
                        opposite: true
                    }],
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },

                    series: [{
                        name: '上网电量等价时(h)',
                        data: [5, 3, 17,20,44, 76, 52,26,10,62,11,32,17,20,6,11,31,53,31,41,22,62,10,71,57,33,10,6,11,83],
                        stack: 'male',
                        type: 'column'
                    }, {
                        name: '光伏方阵吸收损耗等价时(h)',
                        data: [13, 42, 42, 21, 51,52, 35, 44, 72, 12,16,10,66,11,32,17,20,6,11,31,17,20,15,13,14,21,14,21],
                        stack: 'male',
                        type: 'column'
                    }, {
                        name: '逆变器损耗等价时(h)',
                        data: [32, 45, 6, 2, 31,25, 13, 24, 17, 42,16,10,63,17,22,17,20,62,1,3,17,20,5,3,10,6,1,3,17,14],
                        stack: 'male',
                        type: 'column'
                    }, {
                        name: '集电线路及箱变损耗等价时(h)',
                        data: [73, 40, 54, 14, 23,35, 43, 34, 73, 32,36,10,26,1,3,17,20,6,1,3,17,20,5,3,4,2,6,10,7,53],
                        stack: 'male',
                        type: 'column'
                    }, {
                        name: '升压站损耗等价时(h)',
                        data: [43, 60, 14, 24, 43,35, 23, 14, 27, 12,36,10,16,41,23,17,20,6,1,3,17,20,5,3,4,2,6,10,7,75],
                        stack: 'male',
                        type: 'column'
                    },{
                        name: '性能比(%)',
                        // type: 'spline',
                        data: [37.0, 6.9, 9.5, 14.5,5.0,55, 30, 43, 76, 82,96,10,67,18,38,17,28,62,11,34,17,20,5,35,46,28,26,66,10,76],
                        tooltip: {
                            valueSuffix: '%'
                        },
                        yAxis : 1

                    }]
                });

            });

        }




        $(window).resize(function() {
            highstock();
        }).trigger('resize');

        /**
         *
         * @param (String)date  NOT NULL
         * @param (Object)D     NOT NULL
         * example:
         *          dateChange("2012-06",{format: type,minView:2})
         */
        function dateChange(date,D){
            $('.form_datetime').val(date)
                    .datetimepicker(D);

        }

        function initDate(){
            $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd',minView:2});

            var $dateInput = $('.form_datetime');
            var date,type;
            $('#dateSelect').change(function(){
                var type=$(this).children('option:selected').attr('dateType');
                //type :1 年 ，2 月，3 日
                switch(type){
                    case '1':
                        break;
                    case '2':
                        date="2012-06";
                        type="yyyy-mm";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;
                    case '3':
                        date="2012-06-01";
                        type="yyyy-mm-dd";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;

                    default :
                }
            });
        }

        $(function(){

            initDate();
        });



    });
</script>




